<template>
  <div>
    <!-- watch -->
    <input type="text" v-model="name">
    <input type="text" v-model="info.city">
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'JS',
      info: {
        name: 'Aaron',
        city: 'ShangHai'
      }
    }
  },
  watch: {
    name(oldValue, value) {
      console.log('watch name', oldValue, value); // 值类型，可正常拿到 oldValue, value
    },
    info: {
      handler(oldValue, value) {
        console.log('watch info', oldValue, value); // 对象类型，由于指向同一指针，因此oldValue和value是一样的
      },
      deep: true // 深度监听
    },
    'info.city': {
      handler(oldValue, value) {
        console.log('watch info.city', oldValue, value); // 键路径
      },
      immediate: true
    }
  },
  mounted() {
  }
} 
</script>